*{
    padding: 0;
    margin: 0;
}
h2{
    color: #2eb872;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 3em;
}
.div_center {
    margin: auto;
}

.text_center {
    text-align: center;
}

.title {
    font-size: 40pt;
    color: #2eb872;
}

.summary {
    margin: auto;
    font-size: 16pt;
}

.title_container {
    /*fixme flex属性的兼容问题*/
    display: flex;
    height: 700px;
    background-image: url("../images/wkf_head.jpg");
    /*自动放大或缩小背景图片来适应*/
    /*fixme 背景图片的*/
    background-size: cover;
}

.title_container .title {
    color: #ffffff;
}

.title_container .summary {
    width: 75%;
    color: #ffffff;
}

.micro_app_container {
    display: flex;
    background: #FFFFFF;
    height: 300px;
}

.micro_app_container .title {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 3em;
}

.micro_app_container .summary {
    width: 75%;
    color: #bbbbbb;
}

.scanQR_container {
    display: flex;
    margin-bottom: 100px;
}

.scanQR_container .title {
    font-size: 3em;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.scanQR_container .summary {
    padding: 0 5% 0 0;
    color: #5e5e5e;
    float: left;
    width: 50%;
    font-size: 14pt;
}

.scanQR_container .scanQR_work {
    float: right;
    margin-right: -20px;
    width: 100%;
}

.developer {
    /*width: 45%;*/
}

.developer .dev_face {
    float: left;
    width: 10%;
    margin-top: -2%;
}
.in_face{
    width: 50%;
    height: 200px;
    float: left;
}
.in_chatting{
    position: absolute;
    width: 15%;
    height: 100px;
    background: #f5f5f5;
    margin: 3% 0 0 12%;
}
.in_chatting:after{
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    display: block;
    border: 14px solid;
    border-color: transparent #e8e8e8 transparent transparent ;
    right: 104%;
    top: 20%;
    z-index: 1;
}
.in_bordered{
    width: 2%;
    height: 100px;
    margin: 8% 0 0 30%;
    background: #e8e8e8;
}
.in_chatting p{
    width: 80%;
    margin: 20px auto;
}
.in_photo{
    width: 30%;
    float: left;
}
.in_photo img{
    max-width: 75%;
    display: block;
    float: left;
}
.dev_summary {
    display: inline-block;
    padding:20px;
    width:300px;
    border-left: 10px  solid #e8e8e8;
    background: #f5f5f5;
}
.clear{
    clear: both;
}
.chat_point{
    width: 100%;
    margin-bottom: 10%;
}
.point_content{
    width: 75%;
    margin: 0 auto;
}
.point_photo{
    float: left;
    width: 50%;
    margin-top: 6%;
}
.point_photo img{
    max-width:80%;
    display: block;
}
.point_words{
    width: 50%;
    float: right;
}
.point_words h2{
    text-align: center;
}
.point_words div{
    width: 80%;
    margin: 80px auto;
}
.point_words p{
    color: #5c5c5c;
}
.intro_face{
    width: 50%;
    float: right;
    margin-top: -10%;
}
.intro_chatting{
    position: absolute;
    width: 15%;
    height: 100px;
    background: #f5f5f5;
    margin-left: 8%;
}
.intro_chatting p{
    width: 80%;
    margin: 20px auto;
}
.intro_chatting:after{
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    display: block;
    border: 14px solid;
    border-color: transparent transparent transparent #e8e8e8;
    left: 104%;
    top: 40%;
    z-index: 1;
}
.bordered{
    width: 3%;
    height: 100px;
    background:#e8e8e8;
    margin-left: 60%;
    float: left;
}
/*.intro_chatting div{*/
    /*width: 3%;*/
    /*height: 100px;*/
    /*background: #e8e8e8;*/
    /*float: right;*/
/*}*/
.intro_photo{
    width: 30%;
    float: right;
    margin-top: -10%;
}
.intro_photo img{
    max-width: 75%;
    display: block;
    /*margin: 0 0 0 -40%;*/
}
.but{
    width: 50%;
    margin: 0 auto;
}
.but button{
    background: #2eb872;
    color: white;
    height: 2.45333333rem;
    width: 7.97333333rem;
    border: none;
    font-size: 1.5rem;
    font-family:"Microsoft YaHei", "宋体", "Segoe UI", "Lucida Grande", Helvetica, Arial, sans-serif, FreeSans, Arimo;
    margin: 6% 0 0 40%;
    border-radius: 2px;
}
.what{
    width: 100%;
    padding:40px 0 40px 0;
    background-color: #f5f5f5;
}
.w_content{
    width: 75%;
    margin: 0 auto;
}
.w_words{
    width: 50%;
    height: 50%;
    float: left;
}
.w_words h2{
   padding: 40px 0 0 0;
}
.w_words p{
    width: 80%;
    margin-top: 8%;
}
.w_photo{
    width: 50%;
    float: right;
    margin: 40px auto;
}
.w_photo img{
    max-width:60%;
    display: block;
    border-radius: 8%;
    box-shadow: 4px 4px 5px #ccc;
    margin: 0 auto;
}
.footer{
    width: 100%;
    height: 100px;
    background-color: #363b43;
}
.footer .kx{
    width: 35%;
    margin: 0 auto;
    padding: 35px 0 0 0;
}
.kx img{
    max-width: 50%;
    display: block;
    margin: 0 auto;
}